<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <quill-editor
      v-model="addForm.useExplain"
      :options="editorOption"
      ref="myQuillEditor"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
    <div>{{ TiLength }} / 2000</div>

    <div class="ql-editor">
      <p v-html="addForm.useExplain"></p>
    </div>
  </div>
</template>

<script>
import * as Quill from "quill";
// import * as Quill from 'quill' //引入编辑器 //quill编辑器的字体
/** 当前为字体样式 */
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单 // 当前步骤最为关键
Quill.register(Font, true);

/** 当前为字体大小 */
var sizes = ["12", "14", "16", "18", "20", "22", "24", "28", "32"];
var Size = Quill.import("formats/size");
Size.whitelist = sizes; //将字体加入到白名单 // 当前步骤最为关键
Quill.register(Size, true);

export default {
  name: "HelloWorld",
  data() {
    return {
      addForm: {
        useExplain: `
        1、编辑器默认点击上传图片只能单张上传，如果想要使用更方便，可以使用插件quill-image-drop-module，就可多张拖拽上传。

            安装：npm install quill-image-drop-module

            在所用页面引入：

            	import { ImageDrop } from 'quill-image-drop-module';
            	Quill.register('modules/imageDrop', ImageDrop);

            在editorOption的modules里配置：imageDrop:true,

        2、编辑器上传的图片不可以编辑控制大小，查到一个插件quill-image-resize-module可以调节图片大小

            奈何百度了各种方法，也配置了webpack.base.conf 中的module.rules模块，但依旧

            Cannot read property ‘imports’ of undefined"、

            Cannot read property ‘register’ of undefined

            还有说最后压缩打包也会出错，，，遂弃用-_-

            改为上传至oss请求图片时再控制大小

        3、如果在安装时遇到报错errno-4048，提示Please try running this command again as root\Administrator.

            已经使用管理员身份打开安装还是会报错，，，清除npm缓存还是不行，，，搞了好久，最终解决：

            关掉当前工程，不要在idea或什么打开状态，关掉！然后去cmd里面，

            升级npm install -g npm@latest，然后再去install 插件就好了！！！

            （关掉工程然后直接安装插件可能也行，但我是先升级了一下npm，小伙伴们可以试试）
        `,
      },
      TiLength: 0,
      editorOption: {
        placeholder: "请在这里输入",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], //引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；
            [{ list: "ordered" }, { list: "bullet" }], //列表
            [{ script: "sub" }, { script: "super" }], // 上下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [{ size: sizes }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: fonts }], //字体
            [{ align: [] }], //对齐方式
            ["clean"], //清除字体样式
            ["image", "video"], //上传图片、上传视频
          ],
        },
      },
    };
  },
  props: {
    msg: String,
  },
  mounted() {
    this.TiLength = this.$refs.myQuillEditor.quill.getLength() - 1; //数据初始化
  },
  methods: {
    onEditorChange(event) {
      event.quill.deleteText(2000, 1);
      if (this.addForm.useExplain === 0) {
        this.TiLength = 0;
      } else {
        this.TiLength = event.quill.getLength() - 1;
      }
    },
    onEditorBlur(event) {},
    onEditorFocus(event) {},
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
  color: #42b983;
}
</style>
<style>
	</style>
  